<template>
  <div class="chapter-detail bg-gray-100 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <NavBar />
    <!-- 章节内容主体 -->
    <div class="flex-grow flex justify-center items-center py-12 content-wrapper">
      <div class="bg-white p-8 rounded-xl shadow-2xl w-full max-w-3xl">
        <!-- 章节标题 -->
        <h1 class="text-4xl font-extrabold text-gray-800 text-center mb-8">
          {{ chapter.title }}
        </h1>
        <!-- 章节内容 -->
        <div class="prose prose-lg max-w-none">
          <p v-html="chapter.content"></p>
        </div>
        <!-- 上下章导航 -->
        <div class="flex justify-between mt-12">
          <el-button
            v-if="prevChapterId"
            @click="goToPrevChapter"
            class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-6 rounded-md"
          >
            <i class="fa-solid fa-arrow-left mr-2"></i>上一章
          </el-button>
          <el-button
            v-if="nextChapterId"
            @click="goToNextChapter"
            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md"
          >
            下一章<i class="fa-solid fa-arrow-right ml-2"></i>
          </el-button>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import Footer from '@/components/Footer.vue';

export default {
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      chapter: {},
      prevChapterId: null,
      nextChapterId: null
    };
  },
  mounted() {
    const chapterId = parseInt(this.$route.params.chapterId, 10);
    this.$http.get(`/chapter/${chapterId}`)
     .then((response) => {
        this.chapter = response.data;
        this.prevChapterId = chapterId - 1 > 0 ? chapterId - 1 : null;
        this.nextChapterId = chapterId + 1;
      })
     .catch((error) => {
        console.error('获取章节详情失败:', error);
      });
  },
  methods: {
    goToPrevChapter() {
      if (this.prevChapterId) {
          this.$http
         .get(`/chapter/${this.prevChapterId}`)
         .then((response) => {
              this.chapter = response.data;
              // console.log(response);
              // console.log(this.chapter);
          })
         .catch((error) => {
              console.error("获取章节详情失败:", error);
          });
      }
    },
    goToNextChapter() {
      if (this.nextChapterId) {
          this.$http
         .get(`/chapter/${this.nextChapterId}`)
         .then((response) => {
              this.chapter = response.data;
              // console.log(response);
              // console.log(this.chapter);
          })
         .catch((error) => {
              console.error("导航到下一章出错:", error);
          });

      }
    }
  }
};
</script>

<style scoped>
.chapter-detail {
  background-color: #f9fafb;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.nav-bar,
.footer {
  flex: 0 0 10%;
  
}

.content-wrapper {
  flex: 0 0 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10%;
}

.prose {
  line-height: 1.8;
  color: #333;
  font-size: 18px;
}

.chapter-detail h1 {
  color: #333;
}

.chapter-detail .el-button {
  background: #2a5298;
  border-color: #2a5298;
  color: #ffffff;
  transition: background 0.3s ease;
}

.chapter-detail .el-button:hover {
  background: #1e3c72;
  border-color: #1e3c72;
}
</style>